<template>
    <div class="home">
      <h1>父传子</h1>
      <Child :parentValue="msg"></Child>
      <hr>
      <Child :propC="'111'"></Child>
      <h1>子传父</h1>
      <h2>方法一:{{childValue}}</h2>
      <!-- 方法一-->
      <Child @handleAdd1="handleChildValue" :typeParent="1"></Child>
      <!-- 方法二-->
      <h2>方法二:{{textValue}}</h2>
      <Child @test="handleChildValue2" :typeParent="'2'"></Child>
      <!-- 方法三-->
      <h2>方法三:{{childThree}}</h2>
      <Child @handleAdd3="handleChildValue3" :typeParent="3"></Child>
      <!-- 方法四-->
      <h2>方法四:{{childFour}}</h2>
      <Child @test2="handleChildValue4" :typeParent="4"></Child>
    </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import Child from '@/components/Child.vue'
@Options({
  components: {
    Child
  }
})
export default class Demo extends Vue {
  msg = '父组件向子组件传递的值';
  childValue = '';
  // 处理子组件传过来的值  val:是自定义的
  private handleChildValue (val: string) {
    this.childValue = val
  }

  // 方法二
  textValue = '';
  private handleChildValue2 (val: string) {
    this.textValue = val
  }

  // 方法三
  childThree = '';
  private handleChildValue3 (val:string) {
    this.childThree = val
  }

  // 示例4
  childFour = ''
  private handleChildValue4 (val: any) {
    console.log(val)
    this.childFour = val.param1 + '' + val.param2
  }
}
</script>
